<template>
	<view class="newNotice">
		<view class="mail_List">
			<view class="mail gradient" style="font-weight: 700;">
				<view class="order">新增社区活动</view>
			</view>
		</view>
		<view class="icon">
			<u-icon name="arrow-left" color="#fefefe" size="40" @click="navigateBack"></u-icon>
		</view>
		<view class="card">
			<uni-card class="second_card" style="margin: 0;">
				<u-form :model="form" ref="uForm">
					<u-form-item label="标题:" prop="type">
						<u-input v-model="form.type" placeholder-style="color: #cccccc; text-align: right;"
							placeholder="请输入标题" />
					</u-form-item>
					<u-form-item label="链接:">
						<u-input v-model="form.title" placeholder-style="color: #cccccc; text-align: right;"
							placeholder="请输入链接" />
					</u-form-item>
										<u-form-item label="公告类型:">
						<u-input v-model="form.title" :disabled="true" :type="newList==''? 'select' : 'text'"
							:select-open="show" placeholder-style="color: #cccccc; text-align: right;"
							:placeholder="newList==''? '请选择公告类型': newList" @click="show = true" />
					</u-form-item>
					<!-- newList==''? this.style1 : this.style2 -->
					<!-- placeholder-style="color: #cccccc; text-align: right;" -->
					<u-form-item label="内容:" label-position="top" prop="describe">
						<u-input v-model="form.describe" type="textarea"
							placeholder-style="color: #cccccc; text-align: left;" placeholder="请输入通知公告" />
					</u-form-item>
					<view class="main">
						<view style="margin: 24rpx 0;">推送范围:</view>
						<ld-select :multiple="true" :list="options" label-key="label" value-key="value"
							placeholder="请选择推送范围" clearable v-model="value2" @change="selectChange2"></ld-select>
					</view>
				</u-form>
				<!-- <u-select v-model="show" mode="single-column" :list="list" @confirm="confirm"></u-select> -->
				<u-picker v-model="show" mode="time" start-year="2021" :params="params" @confirm="confirm"></u-picker>
			</uni-card>
		</view>
		<view class="button">
			<!-- <u-button type="primary" style="flex: 1;">取消</u-button> -->
			<u-button type="success" style="flex: 1;" @click="determine">确定</u-button>
		</view>
		<!-- 弹框 -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import ldSelect from '@/components/ld-select/ld-select.vue'
	export default {
		components: {
			ldSelect
		},
		data() {
			return {
				// form表单
				form: {
					type: '',
					title: '',
					address: '',
					describe: '',
					chargePerson: '',
					Executor: '',
					Maintenance: '',
					end: ''
				},
				rules: {
					type: [{
						required: true,
						message: '请输入标题',
						// 可以单个或者同时写两个触发验证方式
						trigger: ['change'],
					}],
					describe: [
						// 对name字段进行必填验证
						{
							required: true,
							message: '请填写内容',
							trigger: ['change']
						}
					]
				},
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					// minute: true,
					// second: true
				},
				show: false,
				newList: '',
				list: [{
						value: '1',
						label: '通知'
					},
					{
						value: '2',
						label: '公告'
					}
				],
				// value: '',
				options: [{
					value: '选项1',
					label: ''
				}, {
					value: '选项2',
					label: ''
				}, {
					value: '选项3',
					label: ''
				}, {
					value: '选项4',
					label: ''
				}, {
					value: '选项5',
					label: ''
				}],
				value2: [],
				value3: ''
				// value3: ['选项1','选项2'],
				// value4: []
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad() {
			this.loginId = uni.getStorageSync("setModel")
			// 展示小区下拉框数据
			this.quarters()
			let that = this
			// 回显
			setTimeout(function() {
				that.value2 = []
			}, 2000)
		},
		methods: {
			// selectChange(val){
			//     this.value = val
			// },
			selectChange2(val) {
				this.value2 = val
				this.value3 = this.value2.join(",")
			},

			quarters() {
				// 展示小区数据
				this.$http.get('informationInquiry/selectCommunity', {
					deptId: this.loginId.deptId
				}).then(res => {
					console.log(res)
					let lists = res.data
					this.options = this.changeKey(lists, ['value', 'label', 'label', 'label', 'label', 'label',
						'label', 'label'
					]);
					// setInterval(function(){ uni.navigateBack() }, 3000);
					// this.application = res.data
					// uni.navigateBack()
				})
			},
			changeKey(lists, key) {
				let newArr = [];
				lists.forEach((item) => {
					let newObj = {};
					for (var i = 0; i < key.length; i++) {
						newObj[key[i]] = item[Object.keys(item)[i]]
					}
					newArr.push(newObj);
				})
				return newArr;
			},
			determine() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
						if (this.value3 == '') {
							this.$refs.uToast.show({
								title: '请选择推送范围',
							})
						} else {
							// 展示全部数据
							this.$http.post('informationInquiry/insetNotice', {
								userId: this.loginId.userId,
								noticeTitle: this.form.type,
								skipUrl: this.form.title,
								// noticeType: this.value,
								content: this.form.describe,
								communityId: this.value3
							}).then(res => {
								this.$refs.uToast.show({
									title: res.msg,
								})
								console.log(res, '课程分类')
								setTimeout(function() {
									uni.navigateBack()
								}, 1000);
								// setInterval(function(){ uni.navigateBack() }, 3000);
								// this.application = res.data
								// uni.navigateBack()
							})
						}
					} else {
						console.log('验证失败');
					}
				});
			},
			// 注意返回值为一个数组，单列时取数组的第一个元素即可(只有一个元素)
			confirm(e) {
				// this.newList = e.year+'-'+e.month+'-'+e.day e.hour+':'+e.minute+':'+e.second
				// this.form.title = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}:${e.second}`
				// this.newList = e[0].label
				// console.log(this.newList)
				// this.form.title=e[0].label
				// this.value=e[0].value
				console.log(e);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.newNotice {

		.mail_List {
			overflow: hidden;
			width: 100%;
			background-color: #f2f2f2;

			.mail {
				height: 160rpx;
				line-height: 230rpx;
				color: #fff;
				font-size: 40rpx;
				background-color: #2a4f65;
			}

			.order {
				text-align: center;
			}
		}

		/deep/.card {
			.u-input__input {
				// text-align: right;
				min-height: 60rpx !important;
			}

			u-form-item {
				input {
					text-align: right;
				}

				.u-form-item__message {
					padding-left: unset !important;
				}
			}

			.data-v-c6c7e61e:nth-child(4) {
				.u-input__input {
					text-align: left;
					min-height: 38rpx !important;
				}
			}

			.u-form-item--left {
				flex: unset !important;
				width: unset !important;
			}
		}

		.icon {
			position: absolute;
			top: 96rpx;
			left: 20rpx;
		}

		/deep/.second_card {
			/deep/.u-cell__value {
				margin-right: -18rpx;
			}

			.u-cell {
				padding: 18rpx 32rpx;
			}

			.uni-card__content {
				padding: 0 24rpx !important;
			}
		}

		/deep/.uni-border {
			border-radius: unset !important;
			margin: 24rpx 0 !important;
		}

		.uni-border[data-v-19622063]:after {
			border: unset;
		}

		/deep/.uni-border.data-v-19622063:after {
			border: unset;
		}

		.slot-btn {
			display: flex;
			flex-direction: column;
			width: 200rpx;
			height: 280rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #e5e5e5;

			.add_Photo {
				margin-top: 10rpx;
				color: #cccccc;
			}
		}

		.slot-btn__hover {
			background-color: rgb(235, 236, 238);
		}

		/deep/.button {
			display: flex;
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			// margin-top: 200rpx;
			border-radius: 14rpx;
			overflow: hidden;
			// z-index: 9;

			.u-btn {
				border-radius: unset;
			}
		}
	}
</style>
